<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>登录</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/sign-up-login.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/inputEffect.css" />
<link rel="stylesheet" href="css/tooltips.css" />
<link rel="stylesheet" href="css/spop.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/snow.js"></script>
<script src="js/jquery.pure.tooltips.js"></script>
<script src="js/spop.min.js"></script>
<script>
	function toTop(){
			var sd = $(window).scrollTop();
			if (typeof document.body.style.maxHeight === "undefined") {
				$(containerIDhash).css({
					'position' : 'absolute',
					'top' : sd + $(window).height() - 50
				});
			}
			if (sd > settings.min)
				$(containerIDhash).fadeIn(settings.inDelay);
			else
				$(containerIDhash).fadeOut(settings.Outdelay);
		
	}	
	(function() {
		// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		if (!String.prototype.trim) {
			(function() {
				// Make sure we trim BOM and NBSP
				var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
				String.prototype.trim = function() {
					return this.replace(rtrim, '');
				};
			})();
		}

		[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
			// in case the input is already filled..
			if( inputEl.value.trim() !== '' ) {
				classie.add( inputEl.parentNode, 'input--filled' );
			}

			// events:
			inputEl.addEventListener( 'focus', onInputFocus );
			inputEl.addEventListener( 'blur', onInputBlur );
		} );

		function onInputFocus( ev ) {
			classie.add( ev.target.parentNode, 'input--filled' );
		}

		function onInputBlur( ev ) {
			if( ev.target.value.trim() === '' ) {
				classie.remove( ev.target.parentNode, 'input--filled' );
			}
		}
	})();
	
	$(function() {	
		$('#login #login-password').focus(function() {
			$('.login-owl').addClass('password');
		}).blur(function() {
			$('.login-owl').removeClass('password');
		});
		$('#login #register-password').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #register-repassword').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #forget-password').focus(function() {
			$('.forget-owl').addClass('password');
		}).blur(function() {
			$('.forget-owl').removeClass('password');
		});
		//点击验证码刷新
		$("#loginCode").click(function () {
			refreshLoginCode();
			
		});
		//点击注册验证码刷新
		$("#registerCode").click(function () {
			refreshRegisterCode();
			
		});
	});
	//登录验证码刷新
	function refreshLoginCode() {
		
		$("#loginCode").prop("src","controller/PicCode/loginCode?a="+Math.random());
		
	}
	//注册验证码刷新
	function refreshRegisterCode() {
		
		$("#registerCode").prop("src","controller/PicCode/loginCode?a="+Math.random());
		
	}
	function goto_register(){
		$("#register-username").val("");
		$("#register-password").val("");
		$("#register-repassword").val("");
		$("#register-code").val("");
		$("#tab-2").prop("checked",true);
	}
	
	function goto_login(){
		$("#login-username").val("");
		$("#login-password").val("");
		$("#tab-1").prop("checked",true);
	}
	
	function goto_forget(){
		$("#forget-username").val("");
		$("#forget-password").val("");
		$("#forget-code").val("");
		$("#tab-3").prop("checked",true);
	}
	
	function login(){//登录
		var username = $("#login-username").val(),
			password = $("#login-password").val(),
			code = $("#login-Code").val(),
			flag = false;
		//判断用户名密码是否为空
		if(username == ""){
			$.pt({
        		target: $("#login-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名不能为空"
        	});
			flag = true;
		}
		if(password == ""){
			$.pt({
        		target: $("#login-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码不能为空"
        	});
			flag = true;
		}
		if(code == ""){
			$.pt({
        		target: $("#login-Code"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"验证码不能为空"
        	});
			flag = true;
		}
		//用户名只能是15位以下的字母或数字
		//var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
		//用户名只能是手机号
			var regExp = new RegExp("^((17[0-9])|(14[0-9])|(13[0-9])|(15[^4,\\D])|(18[0,5-9]))\\d{8}$");
			
			if(!regExp.test(username)){
				$.pt({
	        		target: $("#login-username"),
	        		position: 'r',
	        		align: 't',
	        		width: 'auto',
	        		height: 'auto',
	        		content:"用户名只能是手机号"
	        	});
				flag = true;
			}
			
		//密码只能是6-12位字母和数字
		var regExp = new RegExp("^[a-zA-Z0-9]{6,12}$");
		
		if(!regExp.test(password)){
			$.pt({
        		target: $("#login-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码必须为6-12位字母和数字"
        	});
			flag = true;
		}
		if(flag){
			return false;
		}else{//登录
			//调用后台登录验证的方法
			$.ajax({
				url:"controller/user/login",
				type:"post",
				data:{
					account:$("#login-username").val(),
					pass: $("#login-password").val(),
					code:$("#login-Code").val(),
				},
				dataType:"json",
				success:function (data) {
					//验证码判断
					if(data.indexOf("验证码")!=-1){
						$.pt({
				        		target: $("#login-Code"),
				        		position: 'r',
				        		align: 't',
				        		width: 'auto',
				        		height: 'auto',
				        		content:"验证码有误"
        					});
							//更换验证码
						refreshLoginCode();
						
					}
					//登录是否成功判断
					if(data.indexOf("失败")!=-1){
						$.pt({
							target: $("#login-username"),
			        		position: 'r',
			        		align: 't',
			        		width: 'auto',
			        		height: 'auto',
			        		content:"用户名或者密码错误"
        					});
							//更换验证码
						refreshLoginCode();
						
					}else if(data.indexOf("成功")!=-1){
						//跳转到主页
						window.location.href="index.jsp";
						
					}
					
					
				}
			}
				
			);
			
			return false;
		}
	}
	
	//注册
	function register(){
		var register_name = $("#register_name").val(),
			password = $("#register_password").val(),
			repassword = $("#register_repassword").val(),
			register_phone = $("#register_phone").val(),
			code = $("#register-code").val(),
			flag = false,
			validatecode = null;
		//判断用户名密码是否为空
		if(code == ""){
			$.pt({
        		target: $("#register-code"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"验证码不能为空"
        	});
			flag = true;
		}
		if(register_name == ""){
			$.pt({
        		target: $("#register_name"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"姓名不能为空"
        	});
			flag = true;
		}
		if(register_phone == ""){
			$.pt({
        		target: $("#register_phone"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"手机号不能为空"
        	});
			flag = true;
		}
		if(password == ""){
			$.pt({
        		target: $("#register_password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码不能为空"
        	});
			flag = true;
		}
		
		else{
			if(password != repassword){
				$.pt({
	        		target: $("#register_repassword"),
	        		position: 'r',
	        		align: 't',
	        		width: 'auto',
	        		height: 'auto',
	        		content:"两次输入的密码不一致"
	        	});
				flag = true;
			}
		}
		//手机号只能是手机号
		var regExp = new RegExp("^((17[0-9])|(14[0-9])|(13[0-9])|(15[^4,\\D])|(18[0,5-9]))\\d{8}$");
		if(!regExp.test(register_phone)){
			$.pt({
        		target: $("#register_phone"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"手机号格式不正确"
        	});
			flag = true;
		}
		
		//密码检测
		var regExp = new RegExp("^[a-zA-Z0-9]{6,12}$");
		
		if(!regExp.test(password)){
			$.pt({
        		target: $("#register_password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码必须为6-12位字母和数字"
        	});
			flag = true;
		}
		
		
		if(flag){
			return false;
		}else{
			//注册
			//检查用户名是否已经存在
			$.ajax({
				type:"post",
				url:"user/register",
				data:{
					user_name:$("#register_name").val(),
					user_password: $("#register_password").val(),
					user_phone:$("#register_phone").val(),
				},
				dataType:"json",
				success:function(data) {
					//验证码判断
					if (data.indexOf("错误")!=-1) {
						$.pt({
			        		target: $("#register-code"),
			        		position: 'r',
			        		align: 't',
			        		width: 'auto',
			        		height: 'auto',
			        		content:"验证码有误"
			        		});
			        		//更换验证码
			        		refreshRegisterCode();
					} else if(data.indexOf("存在")!=-1){
						$.pt({
							target: $("#register-username"),
			        		position: 'r',
			        		align: 't',
			        		width: 'auto',
			        		height: 'auto',
			        		content:"用户名已存在"
        					});
        					//更换验证码
			        		refreshRegisterCode();
			        		return false;
					}else if (data.indexOf("成功")!=-1) {
						//返回登录
						
						spop({			
							template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
							position: 'top-center',
							style: 'success',
							autoclose: 3000,
							onOpen : function(){
								var second = 2;
								var showPop = setInterval(function(){
									if(second == 0){
										clearInterval(showPop);
									}
									$('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录');
									second--;
								},1000);
							},
							onClose : function(){
								//切换验证码
								refreshRegisterCode();
								goto_login();
							}
						});
			}else{
				$.pt({
					target: $("#register-username"),
	        		position: 'r',
	        		align: 't',
	        		width: 'auto',
	        		height: 'auto',
	        		content:"注册失败"
					});
					//更换验证码
				refreshRegisterCode();
					
			}
		}
	});
			
			return false;
		}
	}

</script>
<style type="text/css">
html{width: 100%; height: 100%;}

body{

	background-repeat: no-repeat;

	background-position: center center #2D0F0F;

	background-color: #00BDDC;

	background-image: url(images/snow.jpg);

	background-size: 100% 100%;

}

.snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; }

</style>
</head>
<body>
	<!-- 雪花背景 -->
	<div class="snow-container"></div>
	<!-- 登录控件 -->
	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
		<input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
		<input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
		<div class="wrapper">
			<!-- 登录页面 -->
			<div class="login sign-in-htm">
				<form class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username" 
									autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-Code" placeholder="请输入验证码" tabindex="2" maxlength="4"/>
								
								<label class="input__label input__label--hideo" for="login-Code">
									<i class="fa fa-key fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
									
								</label>
								
							</span>
							<img id="loginCode" src="controller/PicCode/loginCode" style="float: right;margin-right: 5%;"/>
						</section>
					</div>
					<div class="form-actions">
						<a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a>
						<input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录" 
							style="color:white;"/>
					</div>
				</form>
			</div>
			
			<!-- 注册页面 -->
			<div class="login sign-up-htm">
				<form class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
						
							
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register_name" 
									autocomplete="off" placeholder="请输入姓名" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register_name">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register_password" placeholder="请输入密码" maxlength="11"/>
								<label class="input__label input__label--hideo" for="register_password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register_repassword" placeholder="请确认密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register_repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register_phone" 
									autocomplete="off" placeholder="请输入手机号" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register_phone">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-code" placeholder="请输入验证码" tabindex="2" maxlength="4"/>
								
								<label class="input__label input__label--hideo" for="register-code">
									<i class="fa fa-key fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
									
								</label>
								
							</span>
							<img id="registerCode" src="controller/PicCode/loginCode" style="float: right;margin-right: 5%;"/>
						
						</section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
						<input class="btn btn-primary" type="button" onClick="register()" value="注册" 
							style="color:white;"/>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>